<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Office转PDF - 简单高效的转换工具</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}" type="image/x-icon">
</head>
<body>
    <div class="ios-container">
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>
        
        <div class="app-header">
            <h1>Office 转 PDF</h1>
            <p class="subtitle">简单、快速、高效的文档转换工具</p>
        </div>

        <div class="card main-card">
            <div class="card-content">
                <div class="upload-area" id="upload-area">
                    <div class="upload-icon">
                        <i class="fas fa-file-upload"></i>
                    </div>
                    <div class="upload-text">
                        <p>点击或拖拽文件到此处</p>
                        <p class="small">支持 .doc, .docx, .xls, .xlsx, .ppt, .pptx 格式</p>
                    </div>
                    <input type="file" id="file-input" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx" class="hidden-input">
                </div>
                
                <div class="file-info hidden" id="file-info">
                    <div class="file-preview">
                        <i class="far fa-file-alt file-icon"></i>
                        <div class="file-name" id="selected-file-name">document.docx</div>
                    </div>
                    <button class="ios-button primary" id="convert-button">
                        <i class="fas fa-sync-alt"></i> 转换为PDF
                    </button>
                </div>
            </div>
        </div>

        <div class="card result-card hidden" id="result-card">
            <div class="card-content">
                <div class="result-header">
                    <h3><i class="fas fa-check-circle success-icon"></i> 转换成功!</h3>
                </div>
                <div class="result-details">
                    <div class="file-preview">
                        <i class="far fa-file-pdf file-icon pdf-icon"></i>
                        <div class="file-name" id="result-file-name">document.pdf</div>
                    </div>
                    <a href="#" class="ios-button primary" id="download-link">
                        <i class="fas fa-download"></i> 下载PDF
                    </a>
                    <button class="ios-button secondary" id="new-convert-button">
                        <i class="fas fa-redo"></i> 新的转换
                    </button>
                </div>
            </div>
        </div>

        <div class="loading-overlay hidden" id="loading-overlay">
            <div class="loading-spinner"></div>
            <p>正在转换，请稍候...</p>
        </div>
        
        <div class="error-toast hidden" id="error-toast">
            <i class="fas fa-exclamation-circle"></i>
            <span id="error-message">出现错误</span>
        </div>

        <div class="features-section">
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <div class="feature-text">
                    <h3>快速转换</h3>
                    <p>高效处理各类Office文档</p>
                </div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="feature-text">
                    <h3>安全保障</h3>
                    <p>所有文件本地处理，保障数据安全</p>
                </div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="feature-text">
                    <h3>高质量输出</h3>
                    <p>保持原始文档格式和样式</p>
                </div>
            </div>
        </div>

        <footer class="app-footer">
            <p>© 2023 Office转PDF工具 | 使用 <i class="fas fa-flask"></i> Python + Flask 开发</p>
        </footer>
    </div>
    
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html> 